<div class="p-side-navigation--accordion" id="drawer">
  <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
    Toggle side navigation
  </button>

  <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div>

    <nav class="p-side-navigation__drawer" aria-label="Example side">
      <div class="p-side-navigation__drawer-header">
        <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
          Toggle side navigation
        </button>
      </div>

      <h3 class="p-side-navigation__heading">Introduction</h3>
      <ul class="p-side-navigation__list">
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" href="#">About MAAS</a>
        </li>
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" href="#">Explore MAAS</a>
        </li>
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" href="#">Quick start</a>
        </li>
      </ul>
      <h3 class="p-side-navigation__heading">Machines</h3>
      <ul class="p-side-navigation__list">
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" aria-current="page" href="#">Commission machines</a>
        </li>
        <li class="p-side-navigation__item">
          <button class="p-side-navigation__accordion-button"  aria-expanded="false">Testing</button>
          <ul class="p-side-navigation__list" aria-expanded="false">
            <li class="p-side-navigation__item">
              <a class="p-side-navigation__link" href="#">Network testing</a>
            </li>
            <li class="p-side-navigation__item">
              <a class="p-side-navigation__link" href="#">Commissioning and hardware testing scripts</a>
            </li>
          </ul>
        </li>
        <li class="p-side-navigation__item">
          <button class="p-side-navigation__accordion-button"  aria-expanded="false">Nested accordion</button>
          <ul class="p-side-navigation__list" aria-expanded="false">
            <li class="p-side-navigation__item">
              <a class="p-side-navigation__link" href="#">Network testing</a>
            </li>
            <li class="p-side-navigation__item">
              <a class="p-side-navigation__link" href="#">Commissioning and hardware testing scripts</a>
            </li>
            <li class="p-side-navigation__item">
              <button class="p-side-navigation__accordion-button" aria-expanded="false">Hardware testing with long text wrapped to the next line</button>
              <ul class="p-side-navigation__list" aria-expanded="false">
                <li class="p-side-navigation__item">
                  <button class="p-side-navigation__accordion-button" aria-expanded="false">A fourth level of nesting</button>
                  <ul class="p-side-navigation__list" aria-expanded="false">
                    <li class="p-side-navigation__item">
                      <a class="p-side-navigation__link" href="#">Our scientists were so preoccupied with whether or not they could</a>
                    </li>
                    <li class="p-side-navigation__item">
                      <a class="p-side-navigation__link" href="#">They didn't stop to thing if we should</a>
                    </li>
                  </ul> 
                </li>
                <li class="p-side-navigation__item">
                  <a class="p-side-navigation__link" href="#">We need to go deeper</a>
                </li>
                <li class="p-side-navigation__item">
                  <a class="p-side-navigation__link" href="#">Nested testing</a>
                </li>
              </ul> 
            </li>
          </ul>
        </li>
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" href="#">Deploy machines</a>
        </li>
      </ul>
      <ul class="p-side-navigation__list">
        <li class="p-side-navigation__item--title">
          <a class="p-side-navigation__link">Concepts & terms</a>
        </li>
      </ul>
      <h3 class="p-side-navigation__heading--linked"><a class="p-side-navigation__link">Troubleshoot</a></h3>
      <ul class="p-side-navigation__list">
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" href="#">Getting help</a>
        </li>
        <li class="p-side-navigation__item">
          <a class="p-side-navigation__link" href="#">MAAS 2.5 (and earlier) documentation</a>
        </li>
      </ul>

    </nav>
</div>
